<template>
	<div class="Book_ShoppingCart">
		<div>
			<table class="Cart" cellpadding='0' cellspacing='0'>
				<tr>
					<td><input v-model="checkAll" type="checkbox" @change="check()" /></td>
					<td>图片</td>
					<td>名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
				</tr>
				<tr v-for="(item,index) in goods">
					<td><input type="checkbox" :value="index" v-model="arr" @change="checkOther()" /></td>
					<td><img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`" /></td>
					<td>{{item.book.name}}</td>
					<td>{{item.price}}</td>
					<td>
						<button @click="fun(index,-1)">-</button>
						{{item.num}}
						<button @click="fun(index,1)">+</button>
					</td>
					<td>合计{{item.price*item.num}}</td>
				</tr>
			</table>
		</div>
		<table width="100%" style="background-color: #f0d4a0;">
			<tr>
				<td align="right" style="text-align: center;">&nbsp;姓名&nbsp;</td>
				<td><el-input size="small" placeholder="请输入收货人姓名" v-model="Order.ship2name">
					</el-input></td>
			</tr>
			<tr>
				<td align="right" style="text-align: center;">&nbsp;电话&nbsp;</td>
				<td><el-input size="small" placeholder="请输入收货人电话" v-model="Order.ship2phone">
					</el-input></td>
			</tr>
			<tr>
				<td align="right" style="text-align: center;">&nbsp;地址&nbsp;</td>
				<td><el-input size="small" placeholder="请输入收货人地址" v-model="Order.ship2addr">
					</el-input></td>
			</tr>
		</table>
		<div class="Cart_pay">
			<div style="margin: auto; display: flex;">
				<div>
					<el-button size="small" type="danger" @click="add" style="width: 200px;">下单</el-button>
				</div>
				<div>
					<el-button size="mini" type="primary" @click="update()" style="width: 250px;">更新个人的发货信息</el-button>
				</div>
			</div>


		</div>
		<table>

		</table>
	</div>
</template>

<script>
	export default {
		name: 'Book_ShoppingCart',
		data() {
			return {
				checkAll: false,
				goods: [], //书本数据
				arr: [], //全选框
				Order: {
					ship2name: '',
					ship2phone: '',
					ship2addr: '',
					ordid: 0,
					amount: ''
				}
			}
		},
		methods: {
			add() {
				const cart2Ord = {
					// 设置请求体参数
					ordid: this.Order.ordid,
					amount: this.Order.amount,
				};

				this.$postj('/api/fore/cart/add2Order', this.Order)
					.then((response) => {
						if (response.data.code === 200) {
							// 处理成功情况
							const data = response.data.data;
							this.Order.ordid = ordObj.ordid;
							this.Order.amount = ordObj.amount;
							console.log(`订单号：${data.ordid}`);
							console.log(`订单总价：${data.amount}`);
						} else {
							// 处理错误情况
						}
					})
					.catch((error) => {
						// 处理请求失败的情况
					});
			},
			update() {

			},
			checkOther() {
				this.checkAll = this.arr.length == this.goods.length ? true : false;
				this.arr.sort((a, b) => {
					return a * b;
				})
			},
			check() {
				if (this.checkAll) {
					for (let i in this.goods) {
						this.arr.push(Number(i));
					}
				} else {
					this.arr = [];
				};
				this.arr = Array.from(new Set(this.arr)); //去重
				this.arr.sort((a, b) => {
					return a - b;
				})
			},
			fun(x, y) { //分页
				console.log(x)
				console.log(y)
				console.log(this.goods[x])
				this.goods[x].num += y
				if (this.goods[x].num <= 0) {
					this.goods[x].num = 1
				}
			},
			getMyGoods() { //查看
				this.goods = [];
				this.$get("/api/fore/cart/findMyCarts").then((resp) => {
					console.log(resp.data.data);
					resp.data.data.forEach((item) => {
						item.check = true
						this.goods.push(item)
					})

				})
			},
		},

		mounted() {
			this.getMyGoods();
		}
	}
</script>

<style>
	.Cart_pay {
		margin: auto;
		width: 100%;
		display: flex;
	}

	.Cart {
		width: 100%;
	}

	.Cart tr {
		background-color: #f0d4a0;
		border: solid green 1px;
		width: 100%;
	}

	.Cart img {
		width: 100px;
	}

	.Book_ShoppingCart {
		width: 100%;
		margin-top: 60px;
	}

	.nav {
		display: flex;
	}
</style>